<template>
    <div class="view_merchant">
        <card title="商家列表">
            <template #actions>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
            </template>

            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center" />
                    <el-table-column prop="phone" label="会员账号" />
                    <el-table-column prop="shopName" label="店铺名称" />
                    <el-table-column label="商家类型">
                        <template #default="{ row: { typeId } }">
                            {{ merchantTypes[typeId] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="商家审核状态">
                        <template #default="{ row: { provider } }">
                            <el-tag effect="dark" :type="merchantReviewStatus[provider].tagType">
                                {{ merchantReviewStatus[provider].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="enabled" label="账号状态">
                        <template v-slot="{ row: { enabled } }">
                            <el-tag effect="dark" :type="accountDisabledStatus[+enabled].tagType">
                                {{ accountDisabledStatus[+enabled].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="账户状态">
                        <template v-slot="{ row: { accountNonLocked } }">
                            <el-tag :type="accountLockedStatus[+accountNonLocked].tagType">
                                {{ accountLockedStatus[+accountNonLocked].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row, 'account')">编辑</el-button>
                            <el-button type="text" @click="edit(row, 'review')">审核</el-button>
                            <el-button type="text" @click="view(row.memberId)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 对话框 -->
        <el-dialog :visible.sync="visible" @closed="handleClosed">
            <template #title>
                <el-tabs v-model="tabName">
                    <el-tab-pane label="编辑商家" name="account">
                        <div class="input_box">
                            <div class="input_box-label">账号选项</div>
                            <el-checkbox v-model="formData.isDisabled"> 禁用账号</el-checkbox>
                        </div>
                        <div class="input_box">
                            <div class="input_box-label">账户选项</div>
                            <el-checkbox v-model="formData.isLocked"> 锁定账户 </el-checkbox>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="审核" name="review">
                        <div class="input_box">
                            <div class="input_box-label">审核</div>
                            <el-radio v-model="formData.reviewStatus" :label="1"> 审核通过 </el-radio>
                            <el-radio v-model="formData.reviewStatus" :label="4"> 审核不通过 </el-radio>
                            <!-- <el-radio
                                v-model="formData.reviewStatus"
                                v-for="(val, key) in merchantReviewStatus"
                                :key="key"
                                :label="+key"
                            >
                                {{ val.text }}
                            </el-radio> -->
                        </div>
                        <div class="input_box" v-show="formData.reviewStatus === 4">
                            <div class="input_box-label">不通过审核原因</div>
                            <el-input v-model="formData.reasons" :rows="3" type="textarea" resize="none" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>

        <!-- 详情对话框 -->
        <el-dialog :visible.sync="visible2" custom-class="details_dialog">
            <template #default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h1 class="desc_list-title">{{ details.shopName }}</h1>
                        <p class="desc_list-subtitle">会员账号：{{ details.nickName }}</p>
                    </div>
                    <dl class="desc_list-content">
                        <div class="desc_list-item">
                            <dt>商家类型</dt>
                            <dd>{{ merchantTypes[details.typeId] }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>商家审核状态</dt>
                            <dd>{{ merchantReviewStatus[details.provider].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账户禁用状态</dt>
                            <dd>{{ accountDisabledStatus[+details.enabled].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>账户锁定状态</dt>
                            <dd>{{ accountLockedStatus[+details.accountNonLocked].text }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>创建时间</dt>
                            <dd>{{ details.createTime }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>真实姓名</dt>
                            <dd>{{ details.name }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>身份证号码</dt>
                            <dd>{{ details.idCard }}</dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>身份证正反面</dt>
                            <dd>
                                <img class="id_card_picture" :src="details.positive" :alt="details.positive" />
                                <img class="id_card_picture" :src="details.back" :alt="details.back" />
                            </dd>
                        </div>
                        <div class="desc_list-item">
                            <dt>银行卡信息</dt>
                            <el-table :data="details.bciList">
                                <el-table-column type="index" label="#" align="center" />
                                <el-table-column prop="lockKey" label="卡号" width="200" />
                                <el-table-column prop="bank" label="银行" />
                                <el-table-column prop="name" label="持卡人" />
                                <el-table-column label="类型">
                                    <template #default="{ row }">
                                        {{ row.acctType ? '对公' : '对私' }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="desc_list-item">
                            <dt>商家资质</dt>
                            <dl class="desc_list-content">
                                <div class="desc_list-item">
                                    <dt>公司名</dt>
                                    <dd>{{ details.alList.companyName }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>信用代码</dt>
                                    <dd>{{ details.alList.creditCode }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>公司类型</dt>
                                    <dd>{{ details.alList.regType }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>法人</dt>
                                    <dd>{{ details.alList.faRen }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>登记机关</dt>
                                    <dd>{{ details.alList.regOrgName }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>企业状态</dt>
                                    <dd>{{ details.alList.businessStatus }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>经营范围</dt>
                                    <dd>{{ details.alList.bussinessDes }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>成立日期</dt>
                                    <dd>{{ details.alList.issueTime }}</dd>
                                </div>
                                <div class="desc_list-item">
                                    <dt>证件图片</dt>
                                    <dd>
                                        <img :src="details.alList.pic" :alt="details.alList.pic" />
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    </dl>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { renameObjectKeys } from '../../functions';
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            visible: false,
            visible2: false,
            tabName: 'account',

            tableData: [],
            details: {},

            formData: {
                memberId: 0,
                isDisabled: false,
                isLocked: false,
                reviewStatus: 4,
                reasons: '',
            },

            queryBy: 'phone',
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/ums/findProvider',
            paginable: true,
            params: {
                queryString: 'queryBy',
            },
        }),
    ],

    computed: {
        queryBySomething() {
            return {
                phone: '会员账号',
                shopName: '店铺名',
            };
        },

        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },

        // >>>>> 商家状态常量
        // 商家类型
        merchantTypes() {
            return { 1: '企业', 2: '个体户' };
        },

        // 商家审核状态
        merchantReviewStatus() {
            return {
                1: { text: '审核通过', tagType: 'success' },
                2: { text: '未申请' },
                3: { text: '审核中', tagType: 'warning' },
                4: { text: '审核不通过', tagType: 'danger' },
            };
        },

        // 账户禁用状态
        accountDisabledStatus() {
            return {
                0: { tagType: 'info', text: '禁用' },
                1: { tagType: 'success', text: '正常' },
            };
        },

        // 账户锁定状态
        accountLockedStatus() {
            return {
                0: { tagType: 'info', text: '禁用' },
                1: { tagType: 'success', text: '正常' },
            };
        },
        // 商家状态常量 <<<<<
    },

    methods: {
        // 修改
        edit(merchant, tabName) {
            this.tabName = tabName;
            this.formData.memberId = merchant.memberId;
            this.formData.isDisabled = !merchant.enabled;
            this.formData.isLocked = !merchant.accountNonLocked;
            // 不赋值审核状态
            // this.formData.reviewStatus = merchant.provider;

            this.visible = true;
        },

        // 查看详情
        view(memberId) {
            this.$get('/yxl/ums/findProviderDetails', { memberId }).then(res => {
                // toJpeg([res.positive, res.back, res.alList.pic]).then(([positive, back, pic]) => {
                //     res.positive = positive;
                //     res.back = back;
                //     res.alList.pic = pic;
                // });
                this.details = res;
                this.visible2 = true;
            });
        },

        // 保存
        save() {
            let thenFn = res => {
                this.visible = false;
                this.query();
            };

            let data = Object.assign({}, this.formData);
            data.isDisabled = !data.isDisabled;
            data.isLocked = !data.isLocked;
            renameObjectKeys(data, {
                isDisabled: 'enabled',
                isLocked: 'accountNonLocked',
                reviewStatus: 'provider',
                reasons: 'cause',
            });

            if (this.tabName === 'account') {
                delete data.provider;
                delete data.reasons;
                this.$post('/yxl/ums/updateProviderAccount', data).then(thenFn);
            } else if (this.tabName === 'review') {
                delete data.enabled;
                delete data.accountNonLocked;
                this.$post('/yxl/ums/providerAudit', data).then(thenFn);
            }
        },

        // 处理对话框关闭
        handleClosed() {
            this.formData.reasons = '';
        },
    },
};
</script>